<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
1.v-if='表达式'
2.v-else-if='表达式'
3.v-else='表达式'
适用于:切换频率较低的场景
特点：不展示的DOM元素直接被删除
注意：v-if可以和v-else-if、v-else一起使用 但要求结构不能被打断

2.v-show
写法：v-show='表达式'
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅使用样式隐藏掉
3.备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到
     -->
</head>

<body>
    <div id="root">
        <h2 v-show="true">{{name}}</h2>
        <br><br><br><br><br><br>
        <button @click="n++">点我n+1</button>
        <div v-if="n==1">1</div>
        <div v-else-if="n==2">2</div>
        <div v-else-if="n==3">3</div>
        <div v-else>其他</div>  <!-- else不加条件 前面的判断没成功就是else了 -->

        <br><br><br><br><br><br>
        <!-- template不会破坏结构  template只能配合v-if使用 -->
        <template v-if="n==1">
           <h2>你好</h2>
           <h2>北京</h2>
        </template>
    </div>

    <script src="vue.js"></script>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el: "#root",
            data: {
                name: 'lin',
                n: '1'
            },
           
        })
    </script>
</body>

</html>